<template>
  <div>
    <!-- 第一行：top3News -->
    <el-row justify="center" type="flex">
      <el-col :span="20">
        <top3News></top3News>
      </el-col>
    </el-row>
    <!-- 第二行：Carousel+top10News -->
    <el-row justify="center" :gutter="40" type="flex" style="margin-top: 10px">
      <el-col :span="16">
        <!-- 此处利用父组件向子组件传值，使子组件在不同的页面显示不同的数据 -->
        <carousel v-bind:carouselItems="carouselItems"></carousel>
      </el-col>
      <el-col :span="8">
        <top10News :top10News="indexPageTop10News"></top10News>
      </el-col>
    </el-row>

    <!-- 第三行：左右广告图片 -->
    <el-row
      justify="center"
      :gutter="40"
      type="flex"
      style="margin-top: 10px; height: 90px"
    >
      <el-col :span="16">
        <el-row>
          <a href="#">
            <img
              src="../../assets/frontdesk/images/bainianfendoulu.jpg"
              alt=""
            />
          </a>
          <a href="#">
            <img
              src="../../assets/frontdesk/images/bainianfendoulu.jpg"
              alt=""
            />
          </a>
          <a href="#">
            <img src="../../assets/frontdesk/images/bainianfendoulu.jpg" alt="" />
          </a>
        </el-row>
      </el-col>
      <el-col :span="8">
        <el-row>
          <a href="#">
            <img
              src="../../assets/frontdesk/images/bainianfendoulu.jpg"
              alt=""
              style="width: 100%; height: 90px"
            />
          </a>
        </el-row>
      </el-col>
    </el-row>

    <!-- 第四行：新闻分类及新闻主体内容、小牛说事家园、关注我们-->
    <el-row justify="center" :gutter="40" type="flex" style="margin-top: 10px">
      <el-col :span="16">
        <!-- 主体内容区左侧 -->
        <!-- 直接在indexnewscategoryandnews中指定NewsCategoryID和News -->
        <indexnewscategoryandnews
          :newsCategory="top6NewsCategories[0]"
          :news="top6NewsByCategoryId0"
          style="margin-bottom: 5%"
        ></indexnewscategoryandnews>
        <indexnewscategoryandnews
          :newsCategory="top6NewsCategories[1]"
          :news="top6NewsByCategoryId1"
          style="margin-bottom: 5%"
        ></indexnewscategoryandnews>
        <indexnewscategoryandnews
          :newsCategory="top6NewsCategories[2]"
          :news="top6NewsByCategoryId2"
          style="margin-bottom: 5%"
        ></indexnewscategoryandnews>
        <indexnewscategoryandnews
          :newsCategory="top6NewsCategories[3]"
          :news="top6NewsByCategoryId3"
          style="margin-bottom: 5%"
        ></indexnewscategoryandnews>
        <indexnewscategoryandnews
          :newsCategory="top6NewsCategories[4]"
          :news="top6NewsByCategoryId4"
          style="margin-bottom: 5%"
        ></indexnewscategoryandnews>
        <indexnewscategoryandnews
          :newsCategory="top6NewsCategories[5]"
          :news="top6NewsByCategoryId5"
          style="margin-bottom: 5%"
        ></indexnewscategoryandnews>
        <!-- <indexnewscategoryandnews :newsCategoryId=""  style="margin-bottom:5%;"></indexnewscategoryandnews> -->
        <!-- <indexnewscategoryandnews style="margin-bottom:5%;"></indexnewscategoryandnews>
        <indexnewscategoryandnews style="margin-bottom:5%;"></indexnewscategoryandnews> -->
        <!-- <indexnewscategoryandnews v-for="item in top6NewsCategories" :key="item.id" :newsCategory="item" @load="alert('1243')" :news="indexnewscategoryandnews" style="margin-bottom:5%;"></indexnewscategoryandnews>想偷个懒，问题是在绑定News时无法在表达式中直接执行异步方法 -->
      </el-col>
      <el-col :span="8">
        <!-- 主体内容区右侧 -->
        <!-- 第一行banyuetanjiayuan -->
        <el-row>
          <banyuetanjiayuan style="padding: 20px"></banyuetanjiayuan>
        </el-row>
        <!-- 第二行contackUs -->
        <el-row>
          <contackUs style="padding: 20px"></contackUs>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>


<script>
import top3News from "./top3News.vue";
import top10News from "./top10News.vue";
import banyuetanjiayuan from "./banyuetanjiayuan.vue";
import contackUs from "./contackUs.vue";
import indexnewscategoryandnews from "./indexnewscategoryandnews.vue";

import carousel from "./carousel.vue";
import News from "@/api/News.js";
import NewsCategory from "@/api/NewsCategory.js";
let news = new News();
let newsCategory = new NewsCategory();
export default {
  data() {
    return {
      carouselItems: [], //Carousel数据

      indexPageTop10News: [],

      top6NewsCategories: [], //indexnewscategoryandnews数据

      top6NewsByCategoryId0: [], //indexnewscategoryandnews数据:第0个分类对应的News
      top6NewsByCategoryId1: [], //indexnewscategoryandnews数据:第1个分类对应的News
      top6NewsByCategoryId2: [], //indexnewscategoryandnews数据:第2个分类对应的News
      top6NewsByCategoryId3: [], //indexnewscategoryandnews数据:第3个分类对应的News
      top6NewsByCategoryId4: [], //indexnewscategoryandnews数据:第4个分类对应的News
      top6NewsByCategoryId5: [], //indexnewscategoryandnews数据:第5个分类对应的News
    };
  },
  methods: {
    async GetIndexPageCarousels() {
      const response = await news.GetIndexPageSlider6();
      return response.data;
    },
    async GetIndexPageTop10News() {
      const response = await news.GetTop10News();
      return response.data;
    },
    async GetTop6NewsCategories() {
      const response = await newsCategory.getNewsCategoriesByCount(
        "NewsCategories",
        6
      );
      return response.data;
    },
    //依据NewsCategoryId得到其排列前6的News
    async GetTop6NewsByCategoryId(newsCategoryId) {
      const response = await news.GetTop6NewsByNewsCategoryId(
        newsCategoryId,
        6
      );

      return response.data;
    },
  },
  components: {
    top3News,
    carousel,
    top10News,
    banyuetanjiayuan,
    contackUs,
    indexnewscategoryandnews,
  },
  async mounted() {
    this.$nextTick(async function () {
      // 在页面加载完成之后改变相应的信息：从父组件向子组件传值
    // carousel
    this.carouselItems = await this.GetIndexPageCarousels();
    this.carouselItems=this.carouselItems.slice(3);
    // top10News
    this.indexPageTop10News = await this.GetIndexPageTop10News();
    //top6NewsCategories
    this.top6NewsCategories = await this.GetTop6NewsCategories();


    this.top6NewsByCategoryId0 = await this.GetTop6NewsByCategoryId(
      this.top6NewsCategories[0].id
    );
    this.top6NewsByCategoryId1 = await this.GetTop6NewsByCategoryId(
      this.top6NewsCategories[1].id
    );
    this.top6NewsByCategoryId2 = await this.GetTop6NewsByCategoryId(
      this.top6NewsCategories[2].id
    );
    this.top6NewsByCategoryId3 = await this.GetTop6NewsByCategoryId(
      this.top6NewsCategories[3].id
    );
    this.top6NewsByCategoryId4 = await this.GetTop6NewsByCategoryId(
      this.top6NewsCategories[4].id
    );
    this.top6NewsByCategoryId5 = await this.GetTop6NewsByCategoryId(
      this.top6NewsCategories[5].id
    );
    })
    
  }
    
};
</script>